<template>
	<view class="pb20">
		<view class="coupon-page-main plr15">		
			<view>
				<view class="mt16 coupon-box" v-for="(item,index) in addrs" :key="index">
					<view class="pd10_15 bg-w flex alcenter space" style="border-bottom: 2rpx dashed   #E4E6ED;">
						<view class="flex alcenter" style="width: 100%;">
							<view class="cl-orange" style="width: 96rpx;">
								<text class="ft12">¥</text>
								<text class="ft16 ftw600 ml4">{{item.price*1}}</text>
							</view>
							<view class="ml15" style="width: 100%;">
								<view class="ft14 ftw600 cl-main">{{item.name}} <text style="font-weight: 100; margin-left: 20upx;" class="ft12">剩{{item.count}}张</text></view>
								<view class="mt5 ft12 cl-info2">有效期：{{item.stime}}到{{item.gtime}}</view>
							</view>
						</view>
						<view v-if="item.islq==0" @click="getlq(item.id)" class="btn-mini" :style="getBtnStyle">领取</view>
						<view v-if="item.islq==1" class="btn-mini dis">已领</view>
					</view>
					<view v-if="item.ishd==1" class="pd10_15 ft12 cl-notice" style="background: #ffffff;">
						满{{item.mprice*1}}元可用，不可与其他优惠活动同时使用
					</view>
					<view v-if="item.ishd==2" class="pd10_15 ft12 cl-notice" style="background: #ffffff;">
						满{{item.mprice*1}}元可用，可以与其他优惠活动同时使用
					</view>
					<view class="coupon-yl"></view>
					<view class="coupon-yr"></view>
				</view>
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
		</view>
		<com-footer model="coupon"></com-footer>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	  export default {
		  components: {
		  	uniLoadMore
		  },
		data(){
			return {
				addrs:[],
				listData: [],
				last_id: 0,
				reload: true,
				status: 'more',
				statusa: false,
				text:'',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				}
			}
		},
		computed:{

		},
		onLoad() {
			this.last_id=0
			this.reload=true
			this.getList();
		},
		onShow() {
			
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods:{
			getList() {
				let data = {};
				var limit=10;
				if (this.last_id>0) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.offset = this.last_id*limit;
					data._ = new Date().getTime() + '';
				}
				if(this.text){
					data.text=this.text
				}
				data.limit=limit		
				data.token = uni.getStorageSync("userinfo").token;
				uni.request({
					url: this.configs.webUrl+'/api/coupon/couponlist',
					data: data,
					success: data => {
						console.log(data.data)
						if (data.data.total>0) {
							let list = data.data.rows;
							this.addrs = this.reload ? list : this.addrs.concat(list);
							this.reload = false;
							this.last_id = this.last_id+1;
							if(data.data.total<this.last_id*limit){
								this.status = '';
							}
						}else{
							this.contentText.contentdown='没有数据'
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			getlq(id){
				if(!uni.getStorageSync("userinfo").token){
					uni.showModal({
						title: '温馨提示',
						content: '请先登录',
						showCancel: true,
						confirmText: "登录",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})						
							} else if (res.cancel) {
								uni.navigateBack();						
							}
						}
					});
					return false; 
				}
				let this_= this
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.id=id
				uni.request({
					url: this.configs.webUrl+'/api/coupon/getlq',
					data: data,
					success: data => {
						if (data.data.code>0){	
							let dd=this.addrs.length;
							for(let i = 0; i　< dd; i++) {
							    if(this.addrs[i].id==id){
							    	this.addrs[i].islq=1
							    }
							}
							uni.showToast({ title: data.data.msg,icon:"none" });
						}else{
							uni.showToast({ title: data.data.msg,icon:"none" });
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
		}
	}
</script>

<style>
	.counpon-page-header{
		position: relative;
	}
	.counpon-page-header image{
		width: 100%;
		height: 480rpx;
	}
	.coupon-page-main{

	}
	.coupon-vip-box{
		width: 100%;
		height: 560rpx;
		background: #F87065;
		border-radius: 48rpx;
		overflow: hidden;
	}
	.coupon-vip-box .vip-header{
		width: 100%;
		height: 88rpx;
		position: relative;
	}
	.coupon-vip-box .vip-header image{
		width: 100%;
		height: 88rpx;
	}
	.coupon-vip-box .vip-header .main{
		width: 100%;
		height: 88rpx;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		color:#7B4205;
		font-weight: 600;
	}
	.vip-coupon-scroll{
		white-space: nowrap;
		height: 340rpx;
	}
	.vip-coupon-scroll .item{
		height: 340rpx;
		display: inline-block;
		width: 270rpx;
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.vip-coupon-scroll .item .top{
		padding: 32rpx 40rpx 24rpx 40rpx;
		border-bottom: 2rpx dashed #FEC675;
	}
	.vip-coupon-scroll .item .y-l,.vip-coupon-scroll .item .y-r{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F87065;
		position: absolute;
		z-index: 2;
		top: 220rpx;
	}
	.vip-coupon-scroll .item .y-l{
		left: -10rpx;
	}
	.vip-coupon-scroll .item .y-r{
		right: -10rpx;
	}
	.vip-coupon-num{
		width: 190rpx;
		height: 64rpx;
		position: relative;
	}
	.vip-coupon-num image{
		width: 100%;
		height: 64rpx;
	}
	.vip-coupon-num .num{
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}
	.coupon-title-img{
		width: 120rpx;
		height: 12rpx;
	}
	.coupon-box{
		background: #FAFAFA;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		height: 252rpx;
	}
	.coupon-box .coupon-yl,.coupon-box .coupon-yr{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 148rpx;
		background: #F5F6FA; 
		z-index: 2;
	}
	.coupon-box .coupon-yl{
		left: -10rpx;
	}
	.coupon-box .coupon-yr{
		right: -10rpx;
	}
</style>